<template>
	<div>
		<div style="margin-bottom:20px">
			<el-input
				placeholder="请输入分类名称"
				v-model="classesData.name"
				clearable
				style="width: 400px; margin: 0 auto"
			>
			</el-input>

			<el-button type="primary" @click="addClasses(classesData)"
				>添加分类</el-button
			>
		</div>
		<el-table
			:data="
				classes.filter(
					(data) =>
						!search ||
						data.name.toLowerCase().includes(search.toLowerCase())
				)
			"
			style="width: 100%"
		>
			<el-table-column label="编号" prop="_id"> </el-table-column>
			<el-table-column label="分类名称" prop="name"> </el-table-column>
			<el-table-column align="right">
				<template slot="header" slot-scope="scope">
					<el-input
						size="mini"
						v-model="search"
						placeholder="输入关键字搜索"
					/>
				</template>
				<template slot-scope="scope">
					<!-- <el-button
						size="mini"
						type="safe"
						@click="open(scope.row._id)"
						>修改</el-button
					> -->

					<el-button
						size="mini"
						type="safe"
						@click="open(scope.row._id)"
						>点击修改</el-button
					>
					<el-button
						size="mini"
						type="danger"
						@click="deleteClasses(scope.row._id)"
						>删除</el-button
					>
				</template>
			</el-table-column>
			<el-button-group>
				<el-button type="primary" icon="el-icon-arrow-left"
					>上一页</el-button
				>
				<el-button type="primary"
					>下一页<i class="el-icon-arrow-right el-icon--right"></i
				></el-button>
			</el-button-group>
		</el-table>
	</div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
let { mapActions, mapState } = createNamespacedHelpers("classes");
export default {
	data() {
		return {
			input: "",
			search: "",
			classesData: {
				name: "",
			},
		};
	},
	created() {
		this.getClasses();
	},
	computed: {
		...mapState(["classes"]),
	},
	methods: {
		open(_id) {
			this.$prompt("请输入修改内容", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
			})
				.then(({ value }) => {
					this.updateClasses({ _id, name: value });
				})
				.catch((err) => {
					console.log(err);
					this.$message({
						type: "info",
						message: "取消输入",
					});
				});
		},
		...mapActions([
			"getClasses",
			"addClasses",
			"deleteClasses",
			"updateClasses",
		]),
	},
};
</script>

<style></style>
